<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
		
	</body>
	
</html>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.box1{
		width: 800px;
		height: 800px;
		background-color: #f2f2f2;
		overflow: hidden;
	}
	.box1 div{
		height: 100px;
		width: 100px;
		margin-bottom: 100px;
		margin-left: 0;
	}
	.box2{
		background-color: #00FFFF;
		/* 过渡 ：通过过渡指定一个属性发生切换时的切换方式，提升用户体验*/
		/* 过渡必须是一个有效数值向另一个有效数值过渡 */
		/* transition: all 2s; */
		/* transition-property执行过渡的属性 */
		transition-property:margin-left,height,width;
		/* transition-duration执行过渡的持续时间 单位:s和ms*/
		transition-duration:2s,1s,2000ms;
	}
	
	.box3{
		background-color: orange;
		/* transition-duration:2s; */
		/* 延迟 */
		transition: 2s margin-left 2s;
		/* 过渡的时序函数 * ease默认值 慢速开始先加速后减速 linear匀速 ease-in加速运动 ease-out减速运动 ease-in-out先加速后减速 
		 cubic-bazier()贝塞尔曲线指定时序函数，详见https://cubic-bezier.com/*/
		transition-timing-function: ease-in-out;
	}
	
	.box1:hover > div{
		width: 200px;
		height: 200px;
		margin-left: 700px;
	}
</style>